<template>
	<div>
		<el-dialog
			title="添加分类"
			:visible.sync="dialogVisible"
			width="50%"
			:before-close="handleClose"
			@close="DialdgClose"
		>
			<!-- 内容区域 -->
			<el-form :model="FormData" :rules="FormRules" ref="FormRef" label-width="100px">
				<el-form-item label="分类名称：" prop="cateName">
					<el-input v-model="FormData.cateName"></el-input>
				</el-form-item>
				<el-form-item label="父级分类：">
					<el-cascader
						v-model="selectedCateKeys"
						:options="options"
						:props="cateoprops"
						clearable
						@change="fcate_handleChange"
					></el-cascader>
					<!-- <el-input v-model="FormData.UserName"></el-input> -->
				</el-form-item>
			</el-form>

			<!-- 底部区域 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		//是否弹出
		dialogVisible: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			FormData: {
				cateName: '',
				Pid: null
			},
			FormRules: {
				cateName: [
					{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}
				]
			},
			options: [],
			cateoprops: {
				value: 'id',
				label: 'cateName',
				children: 'vcates',
				expandTrigger: 'hover',
				checkStrictly: true
			},
			selectedCateKeys: []
		}
	},
	methods: {
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done()
				})
				.catch(_ => {})
		},
		//监听关闭添加用户的对话框事件
		DialdgClose() {
            this.selectedCateKeys = []
            this.FormData.Pid==null
			this.$refs.FormRef.resetFields()
		},
		getCateTree() {
			this.$get('/api/Cate/GetCateTree', {
				few: 2
			}).then(res => {
				if (res.code == 0) {
					console.log(res)
					this.options = res.data
				}
			})
		},
		save() {
			this.$refs.FormRef.validate(valid => {
				if (valid) {
					this.$get('/api/Cate/AddCate',this.FormData).then(res=>{
                        if(res.code==0){
                            this.$emit('dateupdata')
                            this.$message({
                                message:res.msg,
                                type:"success"
                            })
                            this.dialogVisible=false
                        }else{
                            this.$message.error(res.msg)
                        }
                    })
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		fcate_handleChange() {
			console.log(this.selectedCateKeys)
			if (this.selectedCateKeys.length > 0) {
				this.FormData.Pid = this.selectedCateKeys[
					this.selectedCateKeys.length - 1
				]
			}
		}
	},
	watch: {
		dialogVisible: function(val) {
			let data = {
				IsShow: val
            }
            if(val==true){
                this.getCateTree()
            }
			this.$emit('IsShowDialdg', data)
		}
	}
}
</script>

<style lang="stylus" scoped>
.el-cascader {
	width: 100%;
}

.el-cascader-panel {
	height: 200px;
}
</style>